<template>
  <a-list v-if="commentList" class="comment-list" itemLayout="horizontal" :dataSource="commentList">
    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
      <a-comment>
        <a-collapse defaultActiveKey="1" :bordered="false">
          <a-collapse-panel :showArrow="false" header="回复" :key="1">
              <textarea :placeholder="'回复 ' + item.users.uName" class="callback-text" v-model="reply"></textarea>
              <Button type="primary" size="small" @click="postReply(item.gcId, item.users.uName, reply)">提交</Button>
          </a-collapse-panel>
        </a-collapse>
        <a slot="author">{{item.users.uName}}</a>
        <a slot="author" class="delete" @click.prevent="deleteComment(item.gcId)" v-if="item.gcUid==uId">删除</a>
        <a-avatar
          slot="avatar"
          :src="item.users.uAvatar"
          :alt="item.users.uName"
        />
        <p slot="content">{{item.gcContent}}</p>
        <a-tooltip slot="datetime" :title="item.gcTime | dataFormat">
          <span>{{item.gcTime | dataFormat}}</span>
        </a-tooltip>
        <template v-if="item.child">
            <!-- 父子组件嵌套传递方法和值  组件嵌套组件，父组件就变了 -->
            <goods :commentList="item.child" @postReply="postReply" @delete="deleteComment"></goods>
        </template>
      </a-comment>
    </a-list-item>
  </a-list>
</template>
<script>
import goods from '@/components/users/common/Goods.vue'
export default {
  name: 'goods',
  data () {
    return {
      uId: JSON.parse(localStorage.getItem('user')).uId, // 用户Id
      reply: '' // 回复输入内容
    }
  },
  methods: {
    // 发表评论留言回复
    postReply (id, uName, reply) {
      this.$emit('postReply', id, uName, reply)
      this.reply = ''
    },
    // 根据评论id删除此评论
    deleteComment (id) {
      this.$emit('delete', id)
    }
  },
  props: ['commentList'],
  components: {
    goods
  }
}
</script>

<style scoped>
.ant-list-split .ant-list-item {
    border-bottom: 0px !important;
    padding: 2px 0 !important;
}
.delete {
  margin-left: 10px;
  color:#ef4238;
}

.callback{
    font-size: 14px;
}
.collapse{
    margin-top: 0.6rem;
}
.callback-text{
    outline:0;
    border-radius: 3px;
    width: 100%;
    font-size: 13px;
    margin-bottom: 0px;
    padding:8px 14px;
}
.ant-collapse-borderless {
    background-color: transparent;
    border: 0;
}
.ant-collapse {
  background-color: transparent;
}
.ant-collapse > .ant-collapse-item {
    border-bottom: 0;
}
.ant-comment-nested .ant-collapse > .ant-collapse-item >>> .ant-collapse-header {
  color: rgba(0, 0, 0, 0.45);
  padding: 0px !important;
}
.ant-collapse > .ant-collapse-item >>> .ant-collapse-header:hover {
  color: rgba(0, 0, 0, 0.85);
}
.ant-collapse > .ant-collapse-item.ant-collapse-no-arrow >>> .ant-collapse-header {
  padding-left: 0px !important;
}
.ant-collapse-content >>> .ant-collapse-content-box {
  padding: 3px;
}
.ant-collapse-header {
  padding-left: 0px !important;
}
.ant-comment >>> .ant-comment-inner {
  padding: 0px !important;
}
</style>
